<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<HTML>
<HTML>
<!--
THE JAVASCRIPT COOKBOOK by Erica Sadun, webrx@mindspring.com
J. Brook Monroe, mrprogguy@techie.com
Copyright (c)1998 by Charles River Media. All Rights Reserved.
This applet can only be re-used or modifed by license holders of the
JavaScript Cookbook CD-ROM. Credit must be given in the source
code and this copyright notice must be maintained. If you do
not hold a license to the JavaScript Cookbook, you may NOT
duplicate or modify this code for your own use.
Use at your own risk. No warranty is given or implied of the suitability
of this applet for any specific application. Neither Erica Sadun nor
Charles River Media will be held responsible for any unwanted effects
due to the use of this applet or any derivative.
--> <HEAD>
<TITLE>Avoider</TITLE>
<SCRIPT LANGUAGE="JavaScript">
var isJS12 = false;
function DoNothing()
{
}
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript1.1">
isJS12 = true;
var lastCell = 37;
var choseDown = true;
var emptyCell = new Image();
var dotCell = new Image();
var notThatHard = new Image();
var ouch = new Image();
var clickHere = new Image();
var offSet = new Array(8,1,-1,-8);
var timeID = 0;
emptyCell.src = "../GRAFX/BLANKTIL.GIF";
dotCell.src = "../GRAFX/DOTTILE.GIF";
ouch.src = "../GRAFX/OUCH.GIF";
clickHere.src = "../GRAFX/CLIKHERE.GIF";
notThatHard.src = "../GRAFX/NOTHARD.GIF";
function Random(val)
{
return Math.floor(Math.random() * val);
}
/*
1 2 3 4 5 6 7 8
9 10 11 12 13 14 15 16
17 18 19 20 21 22 23 24
25 26 27 28 29 30 31 32
33 34 35 36 37 38 39 40
41 42 43 44 45 46 47 48
49 50 51 52 53 54 55 56
57 58 59 60 61 62 63 64
*/
function NewCell(cellNumber)
{
var newVal = 0;
var x = 0;
var y = 0;
var n = 0;
// Corners are special cases;
// instead of using random numbers
// we chose to just toggle a boolean
// (true/false) value to determine
// whether the move from a corner
// position would be vertical or
// horizontal.
if(cellNumber == 1) {
choseDown = !choseDown;
if(choseDown)
newVal = 2;
else
newVal = 9;
return newVal;
}
if(cellNumber == 8) {
choseDown = !choseDown;
if(choseDown)
newVal = 7;
else
newVal = 16;
return newVal;
}
if(cellNumber == 57) {
choseDown = !choseDown;
if(choseDown)
newVal = 48;
else
newVal = 57;
return newVal;
}
if(cellNumber == 64) {
choseDown = !choseDown;
if(choseDown)
newVal = 63;
else
newVal = 56;
return newVal;
}
cellNumber -= 1;
x = cellNumber % 8;
y = Math.floor(cellNumber / 8);
cellNumber++;
// Edges are also special, since we're
// not allow to move off them.
n = Random(3);
if(x == 0) {
if(n == 0)
newVal = cellNumber+1;
else
if(n == 1)
newVal = cellNumber + 8;
else
newVal = cellNumber - 8;
return newVal;
}
if(x == 7) {
if(n == 0)
newVal = cellNumber-1;
else
if(n == 1)
newVal = cellNumber + 8;
else
newVal = cellNumber - 8;
return newVal;
}
if(y == 0) {
if(n == 0)
newVal = cellNumber+8;
else
if(n == 1)
newVal = cellNumber + 1;
else
newVal = cellNumber - 1;
return newVal;
}
if(y == 7) {
if(n == 0)
newVal = cellNumber-8;
else
if(n == 1)
newVal = cellNumber + 1;
else
newVal = cellNumber - 1;
return newVal;
}
// That takes care of the special cases
n = Random(4);
newVal = cellNumber + offSet[n];
return newVal;
}
function Avoid(cellNumber)
{
var theNewCell;
if(lastCell == cellNumber) {
document.images[cellNumber].src = emptyCell.src;
theNewCell = NewCell(cellNumber);
document.images[theNewCell].src = dotCell.src;
lastCell = theNewCell;
}
}
function ClickHere()
{
// Displays the next graphic and starts the timer
// (but only if we're not already playing out a
// timer sequence).
if(timeID == 0) {
document.images[65].src = ouch.src;
timeID = setTimeout("Admonish()",3000);
}
}
function Admonish()
{
// Displays another graphic and starts another timer.
document.images[65].src = notThatHard.src;
timeID = setTimeout("ResetClicker()",3000);
}
function ResetClicker()
{
// Resets the graphic and resets timer
// "handle" to zero (so it's okay to
// start another sequence).
document.images[65].src = clickHere.src;
timeID = 0;
}
</SCRIPT>
</HEAD>
<BODY TEXT="Black" LINK="Blue" VLINK="Purple" ALINK="Red">
<FONT COLOR="007777"><H1><IMG SRC="../GRAFX/UTENS.JPG" WIDTH=80 HEIGHT=50
ALIGN = LEFT>Don't Touch Me!</H1></FONT>
<BLOCKQUOTE><FONT COLOR="770000">
In this recipe we do something a little more interesting with the <FONT COLOR="#770000">onMouseOver()</FONT> event and image arrays.
Move the mouse cursor and try to "touch" the red ball with it.
</FONT> <p><CENTER>
<A HREF="javascript:DoNothing()" onMouseover="Avoid(1)"><IMG SRC="../GRAFX/BLANKTIL.GIF" WIDTH=32 HEIGHT=32 BORDER=0></A>
<A HREF="javascript:DoNothing()" onMouseover="Avoid(2)"><IMG SRC="../GRAFX/BLANKTIL.GIF" WIDTH=32 HEIGHT=32 BORDER=0></A>
<A HREF="javascript:DoNothing()" onMouseover="Avoid(3)"><IMG SRC="../GRAFX/BLANKTIL.GIF" WIDTH=32 HEIGHT=32 BORDER=0></A>
<A HREF="javascript:DoNothing()" onMouseover="Avoid(4)"><IMG SRC="../GRAFX/BLANKTIL.GIF" WIDTH=32 HEIGHT=32 BORDER=0></A>
<A HREF="javascript:DoNothing()" onMouseover="Avoid(5)"><IMG SRC="../GRAFX/BLANKTIL.GIF" WIDTH=32 HEIGHT=32 BORDER=0></A>
<A HREF="javascript:DoNothing()" onMouseover="Avoid(6)"><IMG SRC="../GRAFX/BLANKTIL.GIF" WIDTH=32 HEIGHT=32 BORDER=0></A>
<A HREF="javascript:DoNothing()" onMouseover="Avoid(7)"><IMG SRC="../GRAFX/BLANKTIL.GIF" WIDTH=32 HEIGHT=32 BORDER=0></A>
<A HREF="javascript:DoNothing()" onMouseover="Avoid(8)"><IMG SRC="../GRAFX/BLANKTIL.GIF" WIDTH=32 HEIGHT=32 BORDER=0></A><BR>
<A HREF="javascript:DoNothing()" onMouseover="Avoid(9)"><IMG SRC="../GRAFX/BLANKTIL.GIF" WIDTH=32 HEIGHT=32 BORDER=0></A>
<A HREF="javascript:DoNothing()" onMouseover="Avoid(10)"><IMG SRC="../GRAFX/BLANKTIL.GIF" WIDTH=32 HEIGHT=32 BORDER=0></A>
<A HREF="javascript:DoNothing()" onMouseover="Avoid(11)"><IMG SRC="../GRAFX/BLANKTIL.GIF" WIDTH=32 HEIGHT=32 BORDER=0></A>
<A HREF="javascript:DoNothing()" onMouseover="Avoid(12)"><IMG SRC="../GRAFX/BLANKTIL.GIF" WIDTH=32 HEIGHT=32 BORDER=0></A>
<A HREF="javascript:DoNothing()" onMouseover="Avoid(13)"><IMG SRC="../GRAFX/BLANKTIL.GIF" WIDTH=32 HEIGHT=32 BORDER=0></A>
<A HREF="javascript:DoNothing()" onMouseover="Avoid(14)"><IMG SRC="../GRAFX/BLANKTIL.GIF" WIDTH=32 HEIGHT=32 BORDER=0></A>
<A HREF="javascript:DoNothing()" onMouseover="Avoid(15)"><IMG SRC="../GRAFX/BLANKTIL.GIF" WIDTH=32 HEIGHT=32 BORDER=0></A>
<A HREF="javascript:DoNothing()" onMouseover="Avoid(16)"><IMG SRC="../GRAFX/BLANKTIL.GIF" WIDTH=32 HEIGHT=32 BORDER=0></A><BR>
<A HREF="javascript:DoNothing()" onMouseover="Avoid(17)"><IMG SRC="../GRAFX/BLANKTIL.GIF" WIDTH=32 HEIGHT=32 BORDER=0></A>
<A HREF="javascript:DoNothing()" onMouseover="Avoid(18)"><IMG SRC="../GRAFX/BLANKTIL.GIF" WIDTH=32 HEIGHT=32 BORDER=0></A>
<A HREF="javascript:DoNothing()" onMouseover="Avoid(19)"><IMG SRC="../GRAFX/BLANKTIL.GIF" WIDTH=32 HEIGHT=32 BORDER=0></A>
<A HREF="javascript:DoNothing()" onMouseover="Avoid(20)"><IMG SRC="../GRAFX/BLANKTIL.GIF" WIDTH=32 HEIGHT=32 BORDER=0></A>
<A HREF="javascript:DoNothing()" onMouseover="Avoid(21)"><IMG SRC="../GRAFX/BLANKTIL.GIF" WIDTH=32 HEIGHT=32 BORDER=0></A>
<A HREF="javascript:DoNothing()" onMouseover="Avoid(22)"><IMG SRC="../GRAFX/BLANKTIL.GIF" WIDTH=32 HEIGHT=32 BORDER=0></A>
<A HREF="javascript:DoNothing()" onMouseover="Avoid(23)"><IMG SRC="../GRAFX/BLANKTIL.GIF" WIDTH=32 HEIGHT=32 BORDER=0></A>
<A HREF="javascript:DoNothing()" onMouseover="Avoid(24)"><IMG SRC="../GRAFX/BLANKTIL.GIF" WIDTH=32 HEIGHT=32 BORDER=0></A><BR>
<A HREF="javascript:DoNothing()" onMouseover="Avoid(25)"><IMG SRC="../GRAFX/BLANKTIL.GIF" WIDTH=32 HEIGHT=32 BORDER=0></A>
<A HREF="javascript:DoNothing()" onMouseover="Avoid(26)"><IMG SRC="../GRAFX/BLANKTIL.GIF" WIDTH=32 HEIGHT=32 BORDER=0></A>
<A HREF="javascript:DoNothing()" onMouseover="Avoid(27)"><IMG SRC="../GRAFX/BLANKTIL.GIF" WIDTH=32 HEIGHT=32 BORDER=0></A>
<A HREF="javascript:DoNothing()" onMouseover="Avoid(28)"><IMG SRC="../GRAFX/BLANKTIL.GIF" WIDTH=32 HEIGHT=32 BORDER=0></A>
<A HREF="javascript:DoNothing()" onMouseover="Avoid(29)"><IMG SRC="../GRAFX/BLANKTIL.GIF" WIDTH=32 HEIGHT=32 BORDER=0></A>
<A HREF="javascript:DoNothing()" onMouseover="Avoid(30)"><IMG SRC="../GRAFX/BLANKTIL.GIF" WIDTH=32 HEIGHT=32 BORDER=0></A>
<A HREF="javascript:DoNothing()" onMouseover="Avoid(31)"><IMG SRC="../GRAFX/BLANKTIL.GIF" WIDTH=32 HEIGHT=32 BORDER=0></A>
<A HREF="javascript:DoNothing()" onMouseover="Avoid(32)"><IMG SRC="../GRAFX/BLANKTIL.GIF" WIDTH=32 HEIGHT=32 BORDER=0></A><BR>
<A HREF="javascript:DoNothing()" onMouseover="Avoid(33)"><IMG SRC="../GRAFX/BLANKTIL.GIF" WIDTH=32 HEIGHT=32 BORDER=0></A>
<A HREF="javascript:DoNothing()" onMouseover="Avoid(34)"><IMG SRC="../GRAFX/BLANKTIL.GIF" WIDTH=32 HEIGHT=32 BORDER=0></A>
<A HREF="javascript:DoNothing()" onMouseover="Avoid(35)"><IMG SRC="../GRAFX/BLANKTIL.GIF" WIDTH=32 HEIGHT=32 BORDER=0></A>
<A HREF="javascript:DoNothing()" onMouseover="Avoid(36)"><IMG SRC="../GRAFX/BLANKTIL.GIF" WIDTH=32 HEIGHT=32 BORDER=0></A>
<A HREF="javascript:DoNothing()" onMouseover="Avoid(37)"><IMG SRC="../GRAFX/DOTTILE.GIF" WIDTH=32 HEIGHT=32 BORDER=0></A>
<A HREF="javascript:DoNothing()" onMouseover="Avoid(38)"><IMG SRC="../GRAFX/BLANKTIL.GIF" WIDTH=32 HEIGHT=32 BORDER=0></A>
<A HREF="javascript:DoNothing()" onMouseover="Avoid(39)"><IMG SRC="../GRAFX/BLANKTIL.GIF" WIDTH=32 HEIGHT=32 BORDER=0></A>
<A HREF="javascript:DoNothing()" onMouseover="Avoid(40)"><IMG SRC="../GRAFX/BLANKTIL.GIF" WIDTH=32 HEIGHT=32 BORDER=0></A><BR>
<A HREF="javascript:DoNothing()" onMouseover="Avoid(41)"><IMG SRC="../GRAFX/BLANKTIL.GIF" WIDTH=32 HEIGHT=32 BORDER=0></A>
<A HREF="javascript:DoNothing()" onMouseover="Avoid(42)"><IMG SRC="../GRAFX/BLANKTIL.GIF" WIDTH=32 HEIGHT=32 BORDER=0></A>
<A HREF="javascript:DoNothing()" onMouseover="Avoid(43)"><IMG SRC="../GRAFX/BLANKTIL.GIF" WIDTH=32 HEIGHT=32 BORDER=0></A>
<A HREF="javascript:DoNothing()" onMouseover="Avoid(44)"><IMG SRC="../GRAFX/BLANKTIL.GIF" WIDTH=32 HEIGHT=32 BORDER=0></A>
<A HREF="javascript:DoNothing()" onMouseover="Avoid(45)"><IMG SRC="../GRAFX/BLANKTIL.GIF" WIDTH=32 HEIGHT=32 BORDER=0></A>
<A HREF="javascript:DoNothing()" onMouseover="Avoid(46)"><IMG SRC="../GRAFX/BLANKTIL.GIF" WIDTH=32 HEIGHT=32 BORDER=0></A>
<A HREF="javascript:DoNothing()" onMouseover="Avoid(47)"><IMG SRC="../GRAFX/BLANKTIL.GIF" WIDTH=32 HEIGHT=32 BORDER=0></A>
<A HREF="javascript:DoNothing()" onMouseover="Avoid(48)"><IMG SRC="../GRAFX/BLANKTIL.GIF" WIDTH=32 HEIGHT=32 BORDER=0></A><BR>
<A HREF="javascript:DoNothing()" onMouseover="Avoid(49)"><IMG SRC="../GRAFX/BLANKTIL.GIF" WIDTH=32 HEIGHT=32 BORDER=0></A>
<A HREF="javascript:DoNothing()" onMouseover="Avoid(50)"><IMG SRC="../GRAFX/BLANKTIL.GIF" WIDTH=32 HEIGHT=32 BORDER=0></A>
<A HREF="javascript:DoNothing()" onMouseover="Avoid(51)"><IMG SRC="../GRAFX/BLANKTIL.GIF" WIDTH=32 HEIGHT=32 BORDER=0></A>
<A HREF="javascript:DoNothing()" onMouseover="Avoid(52)"><IMG SRC="../GRAFX/BLANKTIL.GIF" WIDTH=32 HEIGHT=32 BORDER=0></A>
<A HREF="javascript:DoNothing()" onMouseover="Avoid(53)"><IMG SRC="../GRAFX/BLANKTIL.GIF" WIDTH=32 HEIGHT=32 BORDER=0></A>
<A HREF="javascript:DoNothing()" onMouseover="Avoid(54)"><IMG SRC="../GRAFX/BLANKTIL.GIF" WIDTH=32 HEIGHT=32 BORDER=0></A>
<A HREF="javascript:DoNothing()" onMouseover="Avoid(55)"><IMG SRC="../GRAFX/BLANKTIL.GIF" WIDTH=32 HEIGHT=32 BORDER=0></A>
<A HREF="javascript:DoNothing()" onMouseover="Avoid(56)"><IMG SRC="../GRAFX/BLANKTIL.GIF" WIDTH=32 HEIGHT=32 BORDER=0></A><BR>
<A HREF="javascript:DoNothing()" onMouseover="Avoid(57)"><IMG SRC="../GRAFX/BLANKTIL.GIF" WIDTH=32 HEIGHT=32 BORDER=0></A>
<A HREF="javascript:DoNothing()" onMouseover="Avoid(58)"><IMG SRC="../GRAFX/BLANKTIL.GIF" WIDTH=32 HEIGHT=32 BORDER=0></A>
<A HREF="javascript:DoNothing()" onMouseover="Avoid(59)"><IMG SRC="../GRAFX/BLANKTIL.GIF" WIDTH=32 HEIGHT=32 BORDER=0></A>
<A HREF="javascript:DoNothing()" onMouseover="Avoid(60)"><IMG SRC="../GRAFX/BLANKTIL.GIF" WIDTH=32 HEIGHT=32 BORDER=0></A>
<A HREF="javascript:DoNothing()" onMouseover="Avoid(61)"><IMG SRC="../GRAFX/BLANKTIL.GIF" WIDTH=32 HEIGHT=32 BORDER=0></A>
<A HREF="javascript:DoNothing()" onMouseover="Avoid(62)"><IMG SRC="../GRAFX/BLANKTIL.GIF" WIDTH=32 HEIGHT=32 BORDER=0></A>
<A HREF="javascript:DoNothing()" onMouseover="Avoid(63)"><IMG SRC="../GRAFX/BLANKTIL.GIF" WIDTH=32 HEIGHT=32 BORDER=0></A>
<A HREF="javascript:DoNothing()" onMouseover="Avoid(64)"><IMG SRC="../GRAFX/BLANKTIL.GIF" WIDTH=32 HEIGHT=32 BORDER=0></A></CENTER><P>
<FONT COLOR="007777"><H2>Discussion</H2></FONT>
<FONT SIZE=4>
Since image arrays allow you to dynamically re-assign the contents of an on-page graphic, you can use them to create
games or other sorts of moving displays. Any event can be a reason to change a graphic:<P><CENTER>
<A HREF="javascript:ClickHere()"><IMG SRC="../GRAFX/CLIKHERE.GIF" WIDTH=96 HEIGHT=32 BORDER=0></A></CENTER><p>
For this effect we combined an <FONT COLOR="#770000">onClick()</FONT> event with the JavaScript <i>setTimeout()</i> call to create an "animation" on the button.
</FONT>
<BR><BR><h5>Copyright ©1998 by Charles River Media, All Rights Reserved</h5>
</BODY>
</HTML>